<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼气之窝 - 服务</title>
    <link rel="stylesheet" href="../css/style.css"> <!-- 引入样式文件,检查路径是否正确 -->
    <style>
        footer {
            text-align: center;
            padding: 10px 0;
            background-color: #f5f5f5;
            border-top: 1px solid #ddd;
            color: #666;
            font-size: 14px;
            margin-top: 20px;
        }

        .preview-image {
            display: none;
            position: absolute;
            z-index: 10;
            /* 确保预览图在其他元素上方显示,避免被遮挡 */
            width: 200px;
            height: auto;
            border: 2px solid #ddd;
            /* 增加边框厚度,增强视觉效果 */
            border-radius: 8px;
            /* 圆角边框,使图像看起来更加柔和 */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 1.2);
            /* 添加阴影效果,增加立体感 */
            background-color: #fff;
            transition: opacity 0.5s ease;
            opacity: 0;
            /* 初始透明度为0,隐藏状态 */
        }

        .preview-image.show {
            opacity: 1;
        }

        .link {
            text-decoration: none;
            /* 去掉下划线 */
            color: #007BFF;
            /* 链接颜色 */
            font-weight: bold;
            /* 粗体字 */
        }

        .link:hover {
            color: #0056b3;
            /* 悬停时链接颜色 */
        }
    </style>
</head>

<body>
    <header class="header">
        <div class="logo">
            <img src="../image/logo.jpg" alt="网站Logo">
            <span>呼气之窝</span>
        </div>
        <nav class="navigation">
            <ul>
                <li><a href="../demo.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="services.html">服务</a></li>
                <li><a href="contact.html">加入我们</a></li>
            </ul>
        </nav>
    </header>

    <div class="content">
        <div class="box">
            <h2>图片链接索引</h2>
            <ul class="link-list" id="link-gallery">
                <!-- 图片链接将动态加载到这里 -->
            </ul>
            <img src="" alt="预览图" class="preview-image" id="preview">
        </div>
    </div>

    <footer>
        <p>&copy; 2024 呼气之窝. 保留所有权利.</p>
        <p>版权所有,未经许可不得转载.</p>
        <p class="strikethrough">收买h7不在版权考虑范围之内</p>
    </footer>
    <script>
        // 加载 JSON 文件并动态显示图片链接
        fetch('json/image_index.json')
            .then(response => response.json())
            .then(data => {
                const gallery = document.getElementById('link-gallery'); // 获取当前的图片链接列表
                const preview = document.getElementById('preview'); // 获取预览图元素

                data.images.forEach(image => {
                    const linkElement = document.createElement('li'); // 创建一个列表项
                    linkElement.className = 'link-item';
                    linkElement.innerHTML = `
                        <a href="${image.path}" target="_blank" class="link">${image.name}</a> <!-- 链接到图片,检查 path 和 name -->
                    `;

                    // 添加鼠标悬停事件
                    linkElement.onmouseover = function () {
                        preview.src = image.path; // 更新预览图的源为当前链接的图片
                        preview.classList.add('show'); // 添加 `show` 类以触发过渡效果
                        preview.style.display = 'block'; // 显示预览图
                    };
                    linkElement.onmousemove = function (e) {
                        preview.style.left = `${e.pageX + 5}px`; // 将偏移量设置为 5 像素
                        preview.style.top = `${e.pageY + 10}px`; // 您可以根据需要调整垂直位置
                    };

                    linkElement.onmouseout = function () {
                        preview.classList.remove('show'); // 移除 `show` 类以启动过渡效果
                        // setTimeout(() => {
                        //     preview.style.display = 'none'; // 在过渡结束后隐藏预览图
                        // }, 300); // 与 CSS 中的过渡时间同步
                    };

                    gallery.appendChild(linkElement); // 将当前链接项添加到列表
                });
            })
            .catch(error => console.error('加载错误:', error)); // 错误处理,检查加载 JSON 时是否存在问题
    </script>
    <script src="../js/script.js"></script>

</body>

</html>